<template>
  <el-form ref="formRef" :model="form" label-width="100px">
    <el-form-item label="归属：" required>
      <el-select v-model="form.gradeLevel" placeholder="">
        <el-option value="1" label="计算机"></el-option>
        <el-option value="2" label="管理"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="学科：" required>
      <el-select v-model="form.subjectId" placeholder="">
        <el-option
          :key="index"
          v-for="(item, index) in subjectlist"
          :value="item.id"
          :label="item.name"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="题干： "
      prop="content.titleContent"
      required
      label-width="100px"
    >
      <el-input class="halfinput" v-model="form.content.titleContent" />
    </el-form-item>
    <el-form-item label="选项：" required>
      <el-form-item
        :label="item.prefix"
        :key="item.prefix"
        v-for="(item, index) in form.content.questionItemObjects"
        label-width="50px"
        class="question-item-label"
      >
        <el-input v-model="item.prefix" style="width: 50px" />
        <el-input v-model="item.content" class="question-item-content-input" />
        <el-button
          type="danger"
          size="mini"
          class="question-item-remove"
          icon="DeleteFilled"
          @click="questionItemRemove(index)"
        ></el-button>
      </el-form-item>
    </el-form-item>
    <el-form-item label="答案： " prop="correct" required label-width="100px">
      <el-input
        class="halfinput2"
        v-model="form.correct"
        placeholder="答案间以,间隔"
      />
    </el-form-item>
    <el-form-item
      label="解析： "
      prop="content.analyze"
      required
      label-width="100px"
    >
      <el-input class="halfinput1" v-model="form.content.analyze" />
    </el-form-item>
    <el-form-item label="难度： " prop="difficult" required label-width="100px">
      <br />
      <br />
      <el-rate v-model="form.difficult" />
    </el-form-item>
    <el-form-item label="分数" prop="score" required label-width="100px">
      <el-input-number
        v-model="form.score"
        :min="0"
        :max="100"
        @change="handleChange"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm" type="info">重置</el-button>
      <el-button @click="questionItemAdd" type="success">添加选项</el-button>
    </el-form-item></el-form
  >
</template>

<script setup>
import { getsubject } from '@/api/subject'
import { addquestion } from '@/api/question'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
const form = ref({
  gradeLevel: null, // 管理 计算机
  questionType: 2, // 多选
  subjectId: '',
  correct: null,
  score: 1,
  difficult: 0,
  content: {
    analyze: '',
    titleContent: '',
    questionItemObjects: [
      { prefix: 'A', content: '', score: null },
      { prefix: 'B', content: '', score: null },
      { prefix: 'C', content: '', score: null },
      { prefix: 'D', content: '', score: null }
    ]
  }
})
const subjectlist = ref([])
const getsubjectlist = async () => {
  const res = await getsubject()
  subjectlist.value = res.data.data
  //   console.log(subjectlest.value)
}
getsubjectlist()
const submitForm = () => {
  // 提交接口
  addquestion(form.value)

  resetForm()
  ElMessage.success('题目添加成功')
  console.log(form.value)
}
//  还不清楚后端要什么数据
//  主要问题 在于前端标题
const resetForm = () => {
  form.value = {
    gradeLevel: null, // 管理 计算机
    questionType: 2, // 多选
    subjectId: '',
    correct: null,
    score: 1,
    difficult: 0,
    content: {
      analyze: '',
      titleContent: '',
      questionItemObjects: [
        { prefix: 'A', content: '', score: null },
        { prefix: 'B', content: '', score: null },
        { prefix: 'C', content: '', score: null },
        { prefix: 'D', content: '', score: null }
      ]
    }
  }
}
const handleChange = () => {
  console.log(form.value.score)
}
// 添加选项
const questionItemAdd = () => {
  let questionItemObjects = form.value.content.questionItemObjects
  let newLastPrefix
  if (questionItemObjects.length > 0) {
    let last = questionItemObjects[questionItemObjects.length - 1]
    newLastPrefix = String.fromCharCode(last.prefix.charCodeAt() + 1)
  } else {
    newLastPrefix = 'A'
  }
  questionItemObjects.push({ id: null, prefix: newLastPrefix, content: '' })
}
// 选项删除
const questionItemRemove = (index) => {
  form.value.content.questionItemObjects.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.halfinput {
  width: 50%;
}
.halfinput1 {
  width: 80%;
}
.halfinput2 {
  width: 30%;
}
</style>
